<template>
	<view class="template-integral tn-safe-area-inset-bottom main">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
		</tn-nav-bar>


		<view  :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<tn-form :model="form" ref="form" :errorType="['message']"  :labelWidth="150"  class="container">
				<tn-form-item label="施工记录" prop="name">
					<tn-input v-model="form.name" />
				</tn-form-item>
				<tn-form-item label="施工人员" prop="intro">
					<tn-input v-model="form.intro" />
				</tn-form-item>
				<tn-form-item label="备注" prop="sex">
					<tn-input v-model="form.sex" />
				</tn-form-item>
				<tn-form-item label="照片" prop="sex">
					<tn-image-upload :action="action" :fileList="fileList"></tn-image-upload>
				</tn-form-item>
				<!-- <tn-form-item label="爱好" prop="hobby">
					<tn-checkbox-group v-model="form.hobby">
						<tn-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index"
							:name="item.name">
							{{ item.name }}
						</tn-checkbox>
					</tn-checkbox-group>
				</tn-form-item>
				<tn-form-item label="学历" prop="radio">
					<tn-radio-group v-model="form.radio">
						<tn-radio v-for="(item, index) in radioList" :key="index" :name="item.name"
							:disabled="item.disabled">
							{{ item.name }}
						</tn-radio>
					</tn-radio-group>
				</tn-form-item>
				<tn-form-item label="保密" prop="security">
					<tn-switch slot="right" v-model="form.security"></tn-switch>
				</tn-form-item> -->
				<tn-button style="margin: 20rpx auto; width: 100%;"
							backgroundColor="#01BEFF" fontColor="#fff" @click="add">添加</tn-button>
			</tn-form>
		</view>
	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		mixins: [template_page_mixin],
		data() {
			return {
				form: {
					name: '',
					intro: '',
					sex: '',
					hobby: [],
					radio: '',
					security: false
				},
				checkboxList: [{
						name: '编程',
						checked: false,
						disabled: false
					},
					{
						name: '羽毛球',
						checked: false,
						disabled: false
					},
					{
						name: '篮球',
						checked: false,
						disabled: false
					}
				],
				radioList: [{
						name: '小学',
						disabled: false
					},
					{
						name: '大学',
						disabled: false
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.main {
		height: 100vh;
		background-color: #eaeaeb;
	
	}
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;
	
		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}
	
		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}
	
.container {
	margin: 20rpx;
	padding: 20rpx;
	background-color: #fff;
	border-radius: 15rpx;
}
</style>